<template>
	<view>
		<view class="action">
			<!-- <block>
						<text class="wlIcon-erweima" @tap="$wanlshop.auth('/pages/user/qrcode/qrcode')"></text>
						<text class="margin-right text-sm" @tap="$wanlshop.auth('/pages/user/qrcode/qrcode')">会员码</text>
					</block> -->
			<text class="wlIcon-shezhi" style="margin-left: 20rpx;color: #fff;"
				@tap="$wanlshop.auth('/pages/user/setting/setting')"></text>
			<text class="wlIcon-xiaoxizhongxin" style="margin-left: 20rpx;color: #fff;"
				@tap="$wanlshop.auth('/pages/notice/notice')"></text>
			<view class="cu-tag badge" style="margin-left: 20rpx;"
				v-if="statistics.notice.notice +statistics.notice.order + statistics.notice.chat >0 ">
				{{statistics.notice.notice +statistics.notice.order +statistics.notice.chat}}
			</view>
		</view>
		<view class="wanl-user">
			<view class="user">
				<view class="avatar margin-right-bj" @tap="portrai">
					<image class="round" :src="$wanlshop.oss(user.avatar, 62, 62, 2, 'avatar')" mode="aspectFill">
					</image>
				</view>
				<view class="content" v-if="user.isLogin">
					<view class="text-xxl" @tap="$wanlshop.auth('/pages/user/setting/user')" style="color: #fff">
						{{ user.nickname }}
					</view>
					<!-- @tap=" $wanlshop.auth('/pages/user/signin/signin')" -->
					<!-- @tap="$wanlshop.auth('/pages/user/money/money')" -->
					<view class="text-sm">
						<view class="cu-tag sm radius bg-orange" style="background-color: #fff; color: #337DFF;">
							{{$t('user.invite-code')}}:{{ user.id }}
						</view>

						<!-- <view class="cu-tag sm radius bg-orange">Lv {{ user.level }}</view> -->
						<!-- <view class="cu-tag sm radius bg-orange">
							用户余额 {{ user.money }}
						</view> -->
					</view>
				</view>
				<view class="content" v-else>
					<view class="text-xxl" @tap="$wanlshop.to('/pages/user/auth/auth')">{{$t('user.login')}} /
						{{$t('user.signin')}}
					</view>
					<!-- <view class="cu-tag bg-orange sm radius">Hi</view> -->
					<view class="cu-tag wanl-bg-pink sm radius">{{$t('user.login-greeting')}}</view>
				</view>
			</view>
		</view>
		<view class="wanl-user-order padding-sm margin-bj">
			<view class="myOrder">
				{{$t('user.my-order')}}
				<view class="all">
					{{$t('user.order-all')}}
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
			<view class="project text-sm wanl-gray-dark">
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=1')">
					<text class="wlIcon-31daifukuan wanl-pip"></text>
					{{$t('user.order-dzf')}}
					<view class="cu-tag badge bg-orange" v-if="statistics.order.pay > 0">
						{{ $wanlshop.toFormat(statistics.order.pay, "hundred") }}
					</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=2')">
					<text class="wlIcon-31daifahuo wanl-pip"></text>
					{{$t('user.order-dfh')}}
					<view class="cu-tag badge bg-orange" v-if="statistics.order.delive > 0">
						{{ $wanlshop.toFormat(statistics.order.delive, "hundred") }}
					</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=3')">
					<text class="wlIcon-31daishouhuo wanl-pip"></text>
					{{$t('user.order-dsh')}}
					<view class="cu-tag badge bg-orange" v-if="statistics.order.receiving > 0">
						{{ $wanlshop.toFormat(statistics.order.receiving, "hundred") }}
					</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=4')">
					<text class="wlIcon-31daipingjia wanl-pip"></text>
					{{$t('user.order-dpj')}}
					<view class="cu-tag badge bg-orange" v-if="statistics.order.evaluate > 0">
						{{ $wanlshop.toFormat(statistics.order.evaluate, "hundred") }}
					</view>
				</view>
				<view class="solid-left" @tap="$wanlshop.auth('/pages/user/refund/lists')">
					<text class="wlIcon-31youhuiquan wanl-orange"></text>
					{{$t('user.order-sh')}}
					<view class="cu-tag badge bg-orange" v-if="statistics.order.customer > 0">
						{{ $wanlshop.toFormat(statistics.order.customer, "hundred") }}
					</view>
				</view>
			</view>
		</view>
		<!-- 资产 -->
		<!-- <view class="wanl-user-order padding-sm margin-bj" style="margin-top: 20rpx">
			<view class="myOrder">{{$t('user.wodezhican')}}</view>

			<view class="userlist" @click="handleDetail(1)">
				<view class="icon">
					<image class="img" src="@/static/images/index/1.png" mode=""></image>
					{{$t('user.YLDjf')}}
				</view>
				<view class="num">
					{{user.xtmoney_useable||0}}
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
			<view class="userlist" @click="handleDetail(2)" v-if="payConfig=='1'">
				<view class="icon">
					<image class="img" src="@/static/images/index/1.png" mode=""></image>
					{{$t('user.yijifen')}}
				</view>
				<view class="num">
					{{user.yld2xtmoney||0}}
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
			<view class="userlist" @click="handleDetail(3)">
				<view class="icon">
					<image class="img" src="@/static/images/index/1.png" mode=""></image>
					{{$t('user.gupiaojifen')}}
				</view>
				<view class="num">
					{{user.stockmoney_useable||0}}
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
			<view class="userlist" @click="handleDetail(4)">
				<view class="icon">
					<image class="img" src="@/static/images/index/4.png" mode=""></image>
					{{$t('user.yejiyue')}}
				</view>
				<view class="num">
					{{user.money||0}}
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
		</view> -->
		<view class="Myt">
			<view class="money">
				<p>{{$t('user.wodezhican')}}</p>
				<h3>{{usdt_money}} USD</h3>
			</view>
		</view>
		<view class="cellList" @click="handleDetail(0)">
			<view class="name">
				<image :src="'/static/images/otc/Frame0.png'" class="icon"></image>
				YLD
				<view style="font-size:28rpx ;margin-left: 10rpx;"> 单价：<span
						style="color:#337DFF">({{unitPrice}})</span> </view>
			</view>
			<view class="money">
				<view class="price">
					{{usermoneyInof.yld||0}}~<span>{{'$'+usermoneyInof.yld_ut||0}}</span>
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		<view class="cellList" @click="handleDetail(4)">
			<view class="name">
				<image :src="'/static/images/otc/Frame1.png'" class="icon"></image>
				AP
			</view>
			<view class="money">
				<view class="price">
					{{usermoneyInof.ap||0}}
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		<view class="cellList" @click="handleDetail(2)">
			<view class="name">
				<image :src="'/static/images/otc/Frame2.png'" class="icon"></image>
				UT
			</view>
			<view class="money">
				<view class="price">
					{{usermoneyInof.ut||0}}
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		 <!-- @click="handleDetail(5)" -->
		<view class="cellList">
			<view class="name">
				<image :src="'/static/images/otc/Frame2.png'" class="icon"></image>
				YLDA单价
			</view>
			<view class="money">
				<view class="price">
					{{usermoneyInof.ylda_price||0}}
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		
		<view class="cellList" @click="handleDetail(6)">
			<view class="name">
				<image :src="'/static/images/otc/Frame2.png'" class="icon"></image>
				YLDA数量
			</view>
			<view class="money">
				<view class="price">
					{{usermoneyInof.ylda_money_useable||0}}
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		<!-- @click="handleDetail(7)" -->
		<view class="cellList" >
			<view class="name">
				<image :src="'/static/images/otc/Frame2.png'" class="icon"></image>
				平台YLDA数量
			</view>
			<view class="money">
				<view class="price">
					{{usermoneyInof.all_ylda_money_useable||0}}
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		<view class="wanl-user-order padding-sm margin-bj"
			style="margin-top: 20rpx;border: 2rpx solid #E6E8EA; border-radius: 16rpx;">
			<view class="cu-form-group" style="min-height: auto;">
				<view class="title">{{this.$t('user.lang-change.title')}}</view>
				<picker @change="langChange" :value="currentLang" :range="langsList" range-key="title">
					<view class="picker">
						<text v-if="currentLang > -1">{{langsList[currentLang].title}}</text>
						<text class="wanl-gray-light" v-else>{{$t('user.lang-change.value')}}</text>
					</view>
				</picker>
			</view>


			<!-- 			<view class="userlist" style="margin-bottom: 0" @click="handleDetail(1)">
				<view class="icon">
					{{$t('user.lang-change')}}
				</view>
				<view class="num">
					{{user.xtmoney_useable||0}}
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view> -->



		</view>
		<view class="cellList" @click="handleDetail(3)">
			<view class="name">
				支付密码设置
			</view>
			<view class="money">
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		<view class="cellList" @click="clearCache">
			<view class="name">
				<text>{{$t('setting-清除缓存')}}</text>
			</view>
			<view class="money">

				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>
		<!-- <view class="wanl-you-like" :style="{ backgroundImage: 'url(' + $wanlshop.appstc('/common/guess_you_like_it.png') + ')' }"></view> -->
		<!-- <wanl-product :dataList="likeData"/>
		<uni-load-more :status="status" :content-text="contentText" /> -->
		<!-- <view class="edgeInsetBottom"></view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				headerOpacity: 0,
				// 上拉刷新
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: "loading",
				payConfig: null,
				contentText: {
					contentdown: " ",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
				currentLang: 0,
				langsList: [{
						title: "简体中文",
						value: "zh-Hans"
					},
					{
						title: "繁体中文",
						value: "zh-Hant"
					},
					{
						title: "English",
						value: "en"
					}
				],
				usdt_money: "",
				unitPrice: '',
				usermoneyInof: {}
			};
		},
		computed: {
			...mapState(["user", "statistics", "common"]),
		},
		onPullDownRefresh() {
			let user = uni.getStorageSync("wanlshop:user")
			if (user) {
				this.loadData();
			} else {
				uni.stopPullDownRefresh()
			}
		},
		onShow() {
			console.log(this.$i18n.locale)
			this.currentLang = this.langsList.findIndex(item => item.value === this.$i18n.locale)
			// setTimeout(() => {
			// 	uni.setNavigationBarColor({
			// 		frontColor: this.$store.state.common.appStyle.user_font_color == "light" ?
			// 			"#ffffff" : "#000000",
			// 		backgroundColor: this.$store.state.common.appStyle.user_nav_color,
			// 	});
			// }, 200);
			let user = uni.getStorageSync("wanlshop:user")
			if (user) {
				this.loadData();
			}
			this.loadlikeData();
			this.getxtyldpay()
			this.transferInfo()
			this.usdtbl()
			this.getusermoney()
		},
		onPageScroll(e) {
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = "noMore";
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = "loading";
				this.loadlikeData();
			}
		},
		methods: {
			getxtyldpay() {
				uni.request({
					url: "/index/getxtyldpay",
					data: {},
					success: (res) => {
						this.payConfig = res.data.status
					},
				});
			},
			async loadData() {
				await uni.request({
					url: "/wanlshop/user/refresh",
					method: "POST",
					success: (res) => {
						this.$store.commit("statistics/edit", res.data.statistics);
						this.$store.commit("user/setUserInfo", res.data.userinfo);
					},
				});
				uni.stopPullDownRefresh();
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				await uni.request({
					url: "/wanlshop/product/likes?pages=user",
					data: {
						page: this.current_page,
					},
					success: (res) => {
						this.likeData = this.reload ?
							res.data.data :
							this.likeData.concat(res.data.data); //评论数据 追加
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? "noMore" : "more";
					},
				});
			},
			// 帮助
			help() {
				this.$wanlshop.auth("/pages/user/help");
			},
			// 设置
			setting() {
				this.$wanlshop.auth("/pages/user/setting/setting");
			},
			handleDetail(v) {
				if (v == 0) {
					this.$wanlshop.auth("/pages/newPage/stock1");
				} else if (v == 2) {
					this.$wanlshop.auth("/pages/newPage/stock3");
				} else if (v == 3) {
					this.$wanlshop.auth("/pages/newPage/paypwd");
				} else if (v == 4) {
					this.$wanlshop.auth("/pages/newPage/stock2");
				}else if (v == 5) {
					this.$wanlshop.auth("/pages/newPage/stock5");
				}else if (v == 6) {
					this.$wanlshop.auth("/pages/newPage/stock6");
				}else if (v == 7) {
					this.$wanlshop.auth("/pages/newPage/stock7");
				}

				// else if (v == 2) {
				// 	this.$wanlshop.auth("/pages/newPage/stock2");
				// } else if (v == 3) {
				// 	this.$wanlshop.auth("/pages/newPage/stock");
				// } else if (v == 4) {
				// 	this.$wanlshop.auth("/pages/newPage/stock3");
				// }
			},
			portrai() {
				this.$wanlshop.auth("/pages/user/portrait/portrait");
			},
			langChange(e) {
				console.log(e)
				const {
					value
				} = e.detail
				this.currentLang = value;
				let lang = this.langsList[value].value;
				uni.setLocale(lang);
				this.$i18n.locale = lang;
				uni.reLaunch({
					url: '"pages/user'
				});

			}, //转账信息
			transferInfo() {
				uni.request({
					url: "/wanlshop/otc/my/integralExchangeAmount",
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.usdt_money = res.res.data.total_price
						}
					},
				});
			},
			usdtbl() {
				uni.request({
					url: "/user/usdtbl",
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.unitPrice = res.res.data.usdt_yldt_value
						}
					},
				});
			},
			getusermoney() {
				uni.request({
					url: "/user/getusermoney",
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.usermoneyInof = res.res.data
							console.log(res.res.data);
						}
					},
				});
			},
			clearCache() {
				let that = this
				uni.clearStorage({
					success: function() {
						uni.showToast({
							title: "缓存清理完成",
							icon: 'none'

						})
						setTimeout(function() {
							that.$wanlshop.auth("/pages/user/auth/auth");
						}, 1000)

					},
					fail: function() {
						console.log('清理缓存失败');
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.cu-form-group uni-picker {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.cu-form-group uni-picker .picker {
		line-height: 1;
	}

	.cu-form-group uni-picker::after {
		line-height: 30px;
		height: 30px;
	}

	.cu-bar .action.mp:first-child>text[class*="wlIcon-"] {
		margin-left: 0;
	}

	.action {
		width: 100%;
		// display: flex;
		// justify-content: flex-end;
		padding: 30rpx;
		background-color: #327CFF;
		font-size: 40rpx;
		text-align: right;
	}

	.wanl-user {
		background: linear-gradient(180deg, #327CFF 0%, rgba(50, 124, 255, 0) 100%);
		/* position: relative; */
	}

	.wanl-user .user {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
	}

	.wanl-user .user .avatar {
		position: relative;
		height: 123rpx;
		width: 123rpx;
		border-radius: 5000rpx;
		overflow: hidden;
		border: 3px solid rgba(255, 255, 255, 0.25);
	}

	.wanl-user .user .avatar image {
		height: 120rpx;
	}

	.wanl-user .user .avatar .tag {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.wanl-user .user .content {
		flex: 1;
	}

	/* 操作 */
	.wanl-user .operate {
		display: flex;
		justify-content: space-around;
		text-align: center;
		padding-bottom: 70rpx;
		line-height: 1.3;
	}

	.wanl-user .operate text {
		display: block;
		font-size: 32rpx;
	}

	.userlist {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 40rpx;

		.icon {
			display: flex;
			align-items: center;
			color: #666;
		}

		.img {
			width: 28rpx;
			height: 28rpx;
			margin-right: 12rpx;
		}

		.num {
			color: #333;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
	}

	/* 活动 */
	.wanl-user .activity {
		position: absolute;
		width: 100%;
		bottom: -80rpx;
	}

	.wanl-user .activity .radius {
		border-radius: 24rpx;
	}

	.wanl-user .activity .cu-avatar {
		width: 69rpx;
		height: 69rpx;
		margin-right: 30rpx;
		background-color: transparent;
		/* border: 1px solid rgba(255,255,255,.6); */
	}

	.wanl-user .activity .content {
		text-align: left;
		height: 68rpx;
	}

	/* 订单 */
	.wanl-user-order {
		margin-top: -20rpx;
		border-radius: 24rpx;
		background-color: white;
		z-index: 9;

	}

	.all {
		color: #999999;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.myOrder {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}

	.wanl-user-order .title {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.wanl-user-order .title text {}

	/* 状态 */
	.wanl-user-order .project {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.wanl-user-order .project>view {
		position: relative;
		flex: 1;
	}

	.wanl-user-order .project>view .cu-tag {
		top: -4rpx;
		right: 26rpx;
	}

	.wanl-user-order .project text {
		display: block;
		font-size: 50rpx;
		margin-bottom: 6rpx;
	}

	/* 物流 */
	.wanl-user-order .logistics {
		background-color: #f9f9f9;
		border-radius: 24rpx;
	}

	.wanl-user-order .logistics .swiper {
		height: 120rpx;
	}

	.wanl-user-order .logistics .swiper .title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		color: #999999;
	}

	.wanl-user-order .logistics .swiper .cu-avatar {
		margin-right: 10rpx;
		height: 66rpx;
		width: 66rpx;
		border-radius: 12rpx;
		background-color: #ffffff;
	}

	.wanl-user-order .logistics .swiper .content .text-df {
		color: #3797e0;
		font-size: 27rpx;
		margin-bottom: 2rpx;
	}

	.wanl-user-order .logistics .swiper .content .text-sm {
		color: #999999;
	}

	.wanl-user-order .logistics .swiper .content text {
		font-size: 32rpx;
		margin-left: 15rpx;
		margin-right: 10rpx;
	}

	/* 工具箱 */
	.wanl-user-tool {
		background-color: #ffffff;
		border-radius: 24rpx;
	}

	.wanl-user-tool .title {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.wanl-user-tool .title text {
		margin-left: 2rpx;
	}

	/* 状态 */
	.wanl-user-tool .list {
		text-align: center;
	}

	.wanl-user-tool .list>view {
		margin-bottom: 28rpx;
		position: relative;
	}

	.wanl-user-tool .list>view .cu-tag {
		top: -8rpx;
		left: 80rpx;
		right: unset;
	}

	.wanl-user-tool .list text {
		display: block;
		font-size: 54rpx;
		margin-bottom: 8rpx;
	}

	.Myt {
		margin: 24rpx;
		padding: 36rpx 32rpx 24rpx 32rpx;
		border-radius: 20rpx;
		background: #337DFF;
		color: #fff;

		.money {
			p {
				font-size: 24rpx;
				color: #FFFFFF;
			}

			h3 {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;
				margin: 16rpx 0 0 0;
			}
		}
	}

	.cellList {
		margin: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx 40rpx 30rpx;
		background: #fff;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #333333;
		border: 2rpx solid #E6E8EA;

		.name {
			display: flex;
			align-items: center;

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.money {
			display: flex;
			align-items: center;
			color: #666666;

			.price {
				text-align: right;

				span {
					display: block;
				}
			}

			/deep/.u-icon {
				margin-left: 30rpx;
			}
		}
	}
</style>